<template>



  <BasicDrawer v-bind="$attrs" @register="registerDrawer" showFooter :title="getTitle" width="80%" @ok="handleSubmit">

    <vxe-grid ref="tableRef" v-bind="gridOptions" :style="{height: (contentHeight*0.85)+'px'}">
      <template #toolbar_buttons>
        {{ categoryId }}
      </template>
      <template #action="{ row }">
        <TableAction outside :actions="getActions(row)" />
      </template>
      <template  #img_slot="{ row}">
        <TableImg :size="80" :simpleShow="true" :imgList="row.img.split(',')"  v-if="row.img" />
      </template>
    </vxe-grid>


  </BasicDrawer>
</template>
<script lang="ts" setup>

/**
 * 勾选题目列表
 */


import { ref, computed, unref, h, toRaw, reactive } from 'vue';
import { Button } from 'ant-design-vue';
import { BasicForm, useForm } from '@/components/Form';
import { BasicDrawer, useDrawerInner } from '@/components/Drawer';
import {
  BasicTableProps,
  VxeBasicTable,
  VxeGridInstance,
  VxeGridListeners,
  VxeTableDefines,
} from '@/components/VxeTable';

import {
  vxeTableColumns,
  vxeTableFormSchema,
} from './role.data';
import { questionList } from '@/api/heng/ex';
import { BasicModal, useModalInner } from '@/components/Modal';
import { Form, FormItem, Input, InputNumber, DatePicker, Select, Switch } from 'ant-design-vue';

import { paperSave } from '@/api/heng/ex';


import { useMessage } from "@/hooks/web/useMessage";
import util from '@/utils/util';
import {TableImg} from "@/components/Table";

const emit = defineEmits(['success', 'register']);
const isUpdate = ref(true);
const { createMessage } = useMessage();


const id = ref("")

const contentHeight = ref(window.innerHeight);


const tableRef = ref();

const dataList = ref({});


const gridOptions = reactive<BasicTableProps>({
  // keepSource: true,
  editConfig: { trigger: 'click', mode: 'cell', showStatus: true },
  border: true,
  showOverflow: true,
  size: 'mini',
  height: 'auto', // 'auto'
  columns: vxeTableColumns,
  checkboxConfig: {
    checkField: 'isChecked'
  },
  filterConfig: {
    remote: true,
  },

  toolbarConfig: {
    slots: {
      buttons: 'toolbar_buttons',
    },
    refresh: true,
  },
  formConfig: {
    items: vxeTableFormSchema,
  },
  pagerConfig: {
    // pageSize: 20,
  },
  proxyConfig: {
    props: {
      result: 'data.list',
      list: 'data.list',
      total: 'data.totalResult',
      message: 'message',
    },
    filter: true,
    ajax: {
      query: ({ page, form, filters }) => {
        return findPageList(page, form, filters);
      },

    },
  },
});

function findPageList(page, form, filterList?: VxeTableDefines.FilterCheckedParams<any>[]) {
  let json = {};
  if (filterList && filterList.length) {
    filterList.forEach((e) => {
      const value = e.datas[0];
      let field = e.field;
      json[field + 'Like'] = value;
    });
  }
  if(form&&form.categoryId) {

  }else{
    json.categoryId = categoryId.value;
  }
  // console.log("----json:", json);
  // ywApproveList xftList
  return questionList({
    page: page.currentPage,
    pageSize: page.pageSize,
    ...form,
    ...json,
  });
}

const categoryId = ref("");
const select_list=ref([]);

const [registerDrawer, { setDrawerProps, closeDrawer }] = useDrawerInner(async (data) => {
  //打开弹层后的回调
  // resetFields();
  setDrawerProps({ confirmLoading: false });
  // isUpdate.value = !!data.record.isUpdate;
  // id.value = "";
  // console.log("---data:",data);
  // console.log("--data.categoryId:", data.categoryId);
  categoryId.value = data.categoryId;
  if (categoryId.value) {
    gridOptions.formConfig.items[1].visible = false;
  } else {
    gridOptions.formConfig.items[1].visible = true;

  }
  select_list.value=data.select_list;

  //  gridOptions.formConfig.items[1].itemRender.defaultValue = data.categoryId;

  tableRef.value.commitProxy('reload');
  tableRef.value.setCheckboxRow(data.select_list);
});

const getTitle = computed(() => ('请选择题目'));


//async function handleSubmit()

async function handleSubmit() {
  try {

    // let t_list = tableRef.value.getTableData().tableData;
    const selectRecords = tableRef.value.getCheckboxRecords();
    const selectReserveRecords = tableRef.value.getCheckboxReserveRecords();
    let selectList = [...selectRecords, ...selectReserveRecords];
    emit('success', selectList);
    closeDrawer();


  } catch (e) {
    console.log(e)
  } finally {
    setDrawerProps({ confirmLoading: false });

  }
}

function sunccFn(result) {
  if (result && result.code == 200) {
    createMessage.success(result.message);
  } else {
    createMessage.error(result.message);
  }
  closeDrawer()
  emit('success');
}

function cancelFn() {
  //  tableRef.value.clearValidate();
}


function getActions(record) {
  let arr = [

    {
      // icon: 'ant-design:delete-outlined',
      label: '删除',
      color: 'error',
      popConfirm: {
        title: '是否删除？',
        placement: 'left',
        confirm: handleClose.bind(null, record),
      },
    }
  ];


  return arr;
}


function handleClose(record: Recordable) {

  tableRef.value.remove(record);

}

function addFn() {
  tableRef.value.insertAt({ questionId: id.value, isTrue: 0 }, -1);
}

</script>
<style lang="less">
.item-row {
  margin: 0 auto;

  //padding-left: 5%;
  .ant-form-item-label {
    flex: 0 0 28.5%;
    max-width: 28.5%;
  }
}

.lqfp-8 {
  //padding-left: 9% !important;

}
</style>
